<template>
  <view class="report-item">
    <view :class="['status', getStatusColor(info.status)]">{{ info.status }}</view>
    <view>问题类型：{{ info.ftypename || '--' }}</view>
    <view>问题大类：{{ info.flargename || '--' }}</view>
    <view>问题小类：{{ info.fsmallname || '--' }}</view>
    <view>事发时间：{{ info.fcomplaintime || '--' }}</view>
    <view>上报人：{{ info.fcomplainid || '--' }}</view>
    <view @click="handleOpenAddress(info)">
      问题位置：
      <text :class="{ address: info.flatitude && info.flongitude }">
        {{ info.faddr || '--' }}
      </text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({}),
    },
  },

  methods: {
    getStatusColor(status) {
      let background = '';
      switch (status) {
        case '未受理':
          background = 'fail';
          break;
        case '处理中':
          background = 'wait';
          break;
        case '已结案':
          background = 'success';
          break;
        default:
          background = 'fail';
          break;
      }
      return background;
    },

    handleOpenAddress(item) {
      if (item.flatitude && item.flongitude) {
        uni.openLocation({
          latitude: Number(item.flatitude),
          longitude: Number(item.flongitude),
          address: item.faddr,
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/uni.less';

.report-item {
  position: relative;
  margin: 24rpx;
  padding: 32rpx;
  background: #fff;
  border-radius: 16rpx;
  box-shadow: 0 0 20rpx 4rpx #f1f1f1;
  line-height: 48rpx;
  .status {
    position: absolute;
    right: 0;
    top: 0;
    padding: 6rpx 20rpx;
    border-radius: 0 16rpx 0 16rpx;
    font-size: 24rpx;
    background: #eee;
    &.success {
      background: @uni-color-success;
      color: #fff;
    }
    &.fail {
      background: @uni-color-warning;
      color: #fff;
    }
    &.wait {
      background: @uni-color-primary;
      color: #fff;
    }
  }
  .address {
    text-decoration: underline;
    color: @uni-color-primary;
  }
}
</style>
